<template>
  <div class="app-container">
    <YxhyTableQuery ref="yxhyTableQueryRef" :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery">
      <template slot="datetimeRange">
        <YxhyDatetimeRange
          :start-date.sync="queryTimeRange.created_at_start_search"
          :end-date.sync="queryTimeRange.created_at_end_search"
          :start-placeholder="`注册开始日期`"
          :end-placeholder="`注册结束日期`"
        />
      </template>
      <template slot="selectRemote" slot-scope="{param}">
        <template v-if="param === 'product_id_search'">
          <YxhySelectRemote
            :value.sync="queryParams.product_id_search"
            :request-fn="queryListNonSortMp"
            :request-key="`product_name_search`"
            :response-id="`product_id`"
            :response-name="`product_name`"
            :placeholder="`请选择小程序名称`"
          />
        </template>
        <template v-if="param === 'last_video_search'">
          <YxhySelectRemote
            :value.sync="queryParams.last_video_search"
            :request-fn="queryNonSortLibrary"
            :request-key="`title_search`"
            :response-id="`library_id`"
            :response-name="`title`"
            :placeholder="`请选择最后看剧名`"
          />
        </template>
      </template>
    </YxhyTableQuery>

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading">
      <!-- 用户信息插槽 -->
      <template #userInfo>
        <el-table-column label="用户信息" width="165">
          <template slot-scope="{ row }">
            <p class="font-color-td">ID：{{ row.user_id }}</p>
            <p class="font-color-td">昵称：{{ row.nick_name }}</p>
            <p class="font-color-td">手机号：{{ row.mobile | domEmpty }}</p>
            <p class="font-color-td">地区：{{ row.locate_city | domEmpty }}</p>
            <p class="font-color-td">IP：{{ row.last_ip }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 头像插槽 -->
      <template #avatar>
        <el-table-column label="头像" align="center" width="120">
          <template slot-scope="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.avatar || UserDefault"
              :preview-src-list="[row.avatar || UserDefault]"
            />
          </template>
        </el-table-column>
      </template>
      <!-- 金币余额插槽 -->
      <template #coin>
        <el-table-column align="center" :width="columnDateTimeWidth()">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">金币余额</p>
            <p class="font-color-th">会员期限</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.coin | domEmpty }}</p>
            <p class="font-color-td">{{ row.vip | domEmpty }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 渠道Id插槽 -->
      <template #channel>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">渠道Id</p>
            <p class="font-color-th">渠道名</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.cur_channel_id | domEmpty }}</p>
            <p class="font-color-td">{{ row.cur_channel_name | domEmpty }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 注册时间插槽 -->
      <template #registerTime>
        <el-table-column align="center" :width="columnDateTimeWidth()">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">注册时间</p>
            <p class="font-color-th">染色时间</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td width-create-time">{{ row.created_at }}</p>
            <p class="font-color-td width-create-time">{{ row.update_channel_time || '-' }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 状态插槽 -->
      <template #status_text>
        <el-table-column label="状态" align="center" width="auto">
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.status_text }}</p>
            <template v-if="row.status === 1">
              <el-button v-hasPermi="['user:userData:ban']" type="info" size="mini" @click="handleCagingUser(row)">锁定</el-button>
            </template>
            <template v-else>
              <el-button v-hasPermi="['user:userData:unban']" type="primary" size="mini" @click="handleUnCagingUser(row)">解锁</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
      <!-- 最后看剧记录插槽 -->
      <template #lastSeeTime>
        <el-table-column align="center" width="150">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">最后看剧记录</p>
            <p class="font-color-th">最后看剧集数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.video_name | domEmpty }}</p>
            <p class="font-color-td width-create-time">{{ row.episode_num ? `第${row.episode_num}集` : '-' }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 插槽内容 -->
      <template #action>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <div class="action-column">
              <el-button v-hasPermi="['user:userData:account']" type="success" size="mini" @click="handleAccountDetail(scope.row)">账户明细</el-button>
              <el-button v-hasPermi="['user:userData:recharge']" type="success" size="mini" @click="handleRechargeDetail(scope.row)">充值记录</el-button>
              <el-button v-hasPermi="['user:userData:viewed']" type="primary" size="mini" @click="handleViewDetailRef(scope.row)">看剧记录</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

    <!--  账户明细弹出层  -->
    <AccountDetail ref="accountDetailRef" :user_id="actionUserId" />

    <!--  充值记录弹出层  -->
    <RechargeDetail ref="rechargeDetailRef" :user_id="actionUserId" />

    <!--  看剧记录弹出层  -->
    <ViewDetail ref="viewDetailRef" :user_id="actionUserId" />

    <!--  锁定用户弹出层  -->
    <CagingUser ref="cagingUserRef" :user_id="actionUserId" @refresh="init" />

  </div>
</template>

<script>
import UserDefault from '@/assets/images/user-default.png'
import { columnsStatic } from './Ds.js'
import AccountDetail from '@/views/user/userData/components/accountDetail.vue'
import CagingUser from '@/views/user/userData/components/cagingUser.vue'
import { formatDate } from '@/utils'
import { queryPlatformUserList, unbanUser } from '@/api/user/userData'
import RechargeDetail from '@/views/user/userData/components/rechargeDetail.vue'
import ViewDetail from '@/views/user/userData/components/viewDetail.vue'
import { queryListNonSortMp } from '@/api/miniProgram/mp'
import { queryNonSortLibrary } from '@/api/video/library'

export default {
  name: 'UserDataList',
  components: {
    ViewDetail,
    RechargeDetail,
    CagingUser,
    AccountDetail
  },
  data() {
    return {
      UserDefault,
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        user_id_search: undefined,
        nick_name_search: undefined,
        mobile_search: undefined,
        channel_search: undefined,
        product_id_search: undefined,
        last_video_search: undefined,
        channel_name_search: undefined
      },
      queryTimeRange: {
        created_at_start_search: undefined,
        created_at_end_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入用户ID',
        type: 'input',
        param: 'user_id_search'
      }, {
        label: '',
        placeholder: '请输入用户名',
        type: 'input',
        param: 'nick_name_search'
      },
      {
        label: '',
        type: 'datetimeRange',
        param: 'created_at_start_search'
      },
      {
        label: '',
        placeholder: '请输入手机号',
        type: 'input',
        param: 'mobile_search'
      },
      {
        label: '',
        placeholder: '请选择小程序名称',
        type: 'selectRemote',
        param: 'product_id_search'
      }, {
        label: '',
        placeholder: '最后看剧名',
        type: 'selectRemote',
        param: 'last_video_search'
      }, {
        label: '',
        placeholder: '请输入推广渠道Id',
        type: 'input',
        param: 'channel_search'
      }, {
        label: '',
        placeholder: '请输入推广渠道名',
        type: 'input',
        param: 'channel_name_search'
      }],
      loading: false,
      // 表格列
      columns: columnsStatic,

      queryListNonSortMp,
      queryNonSortLibrary,

      actionUserId: undefined
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    // 表格数据源
    async init() {
      this.loading = true
      const res = await queryPlatformUserList({
        ...this.queryPage,
        ...this.queryParams,
        ...this.queryTimeRange
      })
      // 处理响应
      res.data.forEach(e => {
        const { login_channel_name, coin } = e
        e.login_channel_name = login_channel_name || '-'
        e.coin = coin.split('.')[0]
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.queryTimeRange = {
        created_at_start_search: undefined,
        created_at_end_search: undefined
      }

      this.$refs.yxhyTableQueryRef.onEmpty()
    },
    /** 账户明细按钮 */
    handleAccountDetail(row) {
      const { user_id } = row
      this.actionUserId = user_id
      this.$nextTick(() => {
        this.$refs.accountDetailRef.handleOpen()
      })
    },
    /** 充值记录按钮 */
    handleRechargeDetail(row) {
      const { user_id } = row
      this.actionUserId = user_id
      this.$nextTick(() => {
        this.$refs.rechargeDetailRef.handleOpen()
      })
    },
    /** 看剧记录按钮 */
    handleViewDetailRef(row) {
      const { user_id } = row
      this.actionUserId = user_id
      this.$nextTick(() => {
        this.$refs.viewDetailRef.handleOpen()
      })
    },
    /** 锁定用户按钮 */
    handleCagingUser(row) {
      const { user_id } = row
      this.actionUserId = user_id
      this.$nextTick(() => {
        this.$refs.cagingUserRef.handleOpen()
      })
    },
    /** 解锁按钮 */
    handleUnCagingUser(row) {
      const { user_id } = row
      unbanUser({
        user_id
      }).then(res => {
        this.$modal.msgSuccess('操作成功')
        this.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.action-column ::v-deep .el-button + .el-button{
  margin-left: 0;
  margin-top: 10px;
}
</style>
